<template>
    <div class="data-header">
        <div class="header left">
            <span @click="$router.push('/')">返回首页</span>
        </div>
        <div class="header center">销售数据可视化大屏展示</div>
        <div class="header right">
            <span>当前时间：{{ updateTiem }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
// 获取时间
const updateTiem = useDateFormat(useNow(), 'YYYY年MM月DD日 HH:mm:ss')
</script>

<style lang="scss" scoped>
.data-header {
    width: 100%;
    height: 87px;
    display: flex;
    background: url('../../../images/header.png') no-repeat;
    background-size: cover;

    .header {
        font-size: 18px;
        display: flex;
        align-items: center;

        &.left {
            flex: 1;
            justify-content: flex-start;

            span {
                margin-left: 50px;
                margin-bottom: 20px;
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                border-radius: 5px;
                background-color: #314781;
                cursor: pointer;

                &:hover {
                    background-color: #1f3675;
                }
            }
        }
        &.center {
            flex: 1.5;
            color: #fff;
            font-size: 42px;
            font-weight: bold;
            justify-content: center;
        }
        &.right {
            flex: 1;
            justify-content: flex-end;
            span {
                margin-right: 50px;
            }
        }
    }
}
</style>
